<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		section{
			width: 100px;
			height: 100px;
			background-color: red;
			/* 隐藏当前元素 面试:隐藏元素有哪些方法 区别? */
			/* 1.display none 隐藏元素 
				特点:原先位置不保留
			*/
			/* display: none; */
			/* 显示元素 */
			/* display: block; */
			/* 2.visiblity 设置hidden collapse 隐藏元素
				visible 可见得
				特点:原先位置保留 
			*/
			/* visibility: hidden; */
			/* visibility: collapse; */
			/* 3.opacity 隐藏元素 透明度 0-1 0代表完全透明 1代表完全不透明
				特点:原先位置保留
			*/
			/* opacity:0; */

			/* overflow  hidden 超出父元素部分隐藏*/
			overflow: hidden;
			/* overflow scroll 超出父元素部分以滚动条形式显示 */
			overflow: scroll;
			/* auto 自适应 */
			overflow: auto;
		}
		p:hover{
			/* 游标 */
			cursor: pointer;
		}
	</style>
</head>
<body>
	<section>显示与隐藏
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
		<div>我是块级元素</div>
	</section>
	<p>段落标签</p>
	<!-- 隐藏元素得方法 区别?-->
	<!-- 1.display none 原先位置不保留 -->
	<!-- 2.visibility hidden collapse 原先位置保留 -->
	<!-- 3.opacity 设置0 原先位置保留 --> 
	<!-- js事件 -->
</body>
</html>